<template>
  <div>
    <el-dialog title="提示" :visible.sync="dialogVisible" width="30%" :before-close="closeDialog">
      <el-form ref="userEditForm" :model="userData" :rules="rules" label-width="100px" class="demo-userData">
        <el-form-item label="用户名" prop="userName">
          <el-input v-model="userData.userName"></el-input>
        </el-form-item>

        <el-form-item label="昵称" prop="nickName">
          <el-input v-model="userData.nickName"></el-input>
        </el-form-item>


        <el-form-item label="手机号" prop="mobile">
          <el-input v-model="userData.mobile"></el-input>
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="userData.userStatus" placeholder="请选择状态" style="width:100%">
            <el-option v-for="(item,index) of userStatusDict" :label="item" :value="index"
              :key="'user_dict_'+index"></el-option>

          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="closeDialog">取 消</el-button>
        <el-button type="primary" @click="submitForm('userEditForm')">确 定</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
export default {
  props: ["dialogVisible",'editRowData', 'closeDialog', 'submitUserData'],
  mounted() {

  },
  beforeUpdate(){

    if(this.editRowData.id && !this.userData.id && this.dialogVisible){
      console.log("beforeUpdate", this.dialogVisible)
      this.userData = {
            ...this.editRowData
          }
    }
    
  },
  data() {
    return {
      userData: {
        userName: '',
        nickName: '',
        userStatus: '',
        mobile: '',
      },
      userStatusDict: {
        "1": "正常",
        "2": "冻结",
        "3": "注销"
      },
      rules: {
        userName: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 3, max: 16, message: '长度在 3 到 26 个字符', trigger: 'blur' }
        ],
        nickName: [{ required: true, message: '请输入昵称', trigger: 'blur' },],
        userStatus: [
          { required: true, message: '请选择状态', trigger: 'change' }
        ],
        mobile: [{ required: true, message: '请输入手机号', trigger: 'blur' },]
      }
    }
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.submitUserData(this.userData)
          console.log('after submit!!');
          this.userData ={}
        } else {
          console.log('error submit!!');
          return false;
        }
      });

    },
  }
}
</script>
<style scoped></style>